<!--顶部统计数-->
<template>
  <div class="top">
    <div id="map_container"></div>
    <div class="textDiv">
      <div class="boxs">
        <div v-for="item in textArr" :key="item" class="item">{{ item }}</div>
      </div>
      <div class="boxs">
        <div class="item car">
          <animate-number
            from="0"
            :to="fieldObj.carCount || 0"
            :key="fieldObj.carCount || 0"
            class="number"
          ></animate-number>
          台
        </div>
        <div class="item car">
          <animate-number
            from="0"
            :to="fieldObj.carUseCount || 0"
            :key="fieldObj.carUseCount || 0"
            class="number"
          ></animate-number>
          台
        </div>
        <div class="item car">
          <animate-number
            from="0"
            :to="fieldObj.carUnusedCount || 0"
            :key="fieldObj.carUnusedCount || 0"
            class="number"
          ></animate-number>
          台
        </div>
        <div class="item car">
          <animate-number
            from="0"
            :to="fieldObj.carRepairCount || 0"
            :key="fieldObj.carRepairCount || 0"
            class="number"
          ></animate-number>
          台
        </div>
      </div>
    </div>
  </div>
</template>

<script>
import {
  getGetCarPositionList,
  getGetCarPositionToParkAreaLine,
} from "@/api/dataV/index";
import { mapState } from "vuex";
export default {
  name: "TopView",
  data() {
    return {
      ponit: [], // 标点
      linPonit: [], // 开始结束线
      // fieldObj: {},
      textArr: ["车辆总数", "使用数量", "待用数量", "维保数量"],
    };
  },
  computed:{
    ...mapState(['fieldObj'])
  },
  mounted() {
    // const store = this.$store.state.fieldObj;
    // if (JSON.stringify(store) !== "{}") {
      // this.fieldObj = store;
    // }


    this.init();
  },
  beforeDestroy() {
    clearInterval(this.trme);
  },
  methods: {
    init() {
      this.query();
      this.trme = setInterval(() => this.query(), 600000);
    },
    query() {
      new Promise(async (resolve) => {
        await getGetCarPositionList().then((res) => {
          this.ponit = res.map((v) => {
            return { a: [v.lng, v.lat], type: v.type };
          });
        });
        await getGetCarPositionToParkAreaLine().then((res) => {
          this.linPonit = res.map((t) => {
            const fromArr = t.carPosition.split(",");
            const toArr = t.parkPosition.split(",");
            return {
              from: { lng: Number(fromArr[0]), lat: Number(fromArr[1]) },
              to: { lng: Number(toArr[0]), lat: Number(toArr[1]) },
            };
          });
        });
        resolve();
      }).then(() => {
        this.mapVFun();
      });
    },
    mapVFun() {
      const { ponit, linPonit } = this;
      let map = initMap({
        tilt: 45,
        heading: 0,
        center: ponit[0].a,
        zoom: 12,
        style: darkStyle,
      });

      let randomCount = ponit.length; // 模拟的飞线的数量
      let curve = new mapvgl.BezierCurve();
      let data = [];
      let datas = [];
      // 构造数据
      while (randomCount--) {
        curve.setOptions({
          start: [
            linPonit[randomCount].from.lng,
            linPonit[randomCount].from.lat,
          ],
          end: [linPonit[randomCount].to.lng, linPonit[randomCount].to.lat],
        });
        let curveModelData = curve.getPoints();
        data.push({
          geometry: {
            type: "LineString",
            coordinates: curveModelData,
          },
          properties: {
            count: Math.random(),
          },
        });
        if (ponit[randomCount].type > 5) {
          datas.push({
            geometry: {
              type: "Point",
              coordinates: ponit[randomCount].a,
            },
            color: "red",
            size: 6,
          });
        } else {
          datas.push({
            geometry: {
              type: "Point",
              coordinates: ponit[randomCount].a,
            },
            color: "#67C23A",
            size: 6,
          });
        }
      }
      let view = new mapvgl.View({
        map: map,
      });

      let lineLayer = new mapvgl.LineLayer({
        blend: "lighter",
        width: 2,
        color: "rgba(33, 242, 214, 0.6)",
      });
      view.addLayer(lineLayer);
      lineLayer.setData(data);

      let flyLayer = new mapvgl.LineLayer({
        blend: "lighter",
        // color: "rgba(255, 71, 26, 0.9)",
        color: "#74f0ff",
        width: 3,
        animation: true,
        duration: 1, // 循环时间2s
        trailLength: 0.8, // 拖尾长度占间隔的0.8
        interval: 0.2, // 粒子长度占线整体长度的0.2
      });
      view.addLayer(flyLayer);
      flyLayer.setData(data);

      let bubbleLayer = new mapvgl.CircleLayer({
        // 绘制带泡泡的圆
        type: "bubble",
        // 扩散半径，支持直接设置和回调两种形式，size为点的大小
        radius(size) {
          return 2 * size;
        },
        // 扩散时间
        duration: 1,
        // 渐隐时间
        trail: 1,
      });
      view.addLayer(bubbleLayer);
      bubbleLayer.setData(datas);
    },
  },
};
</script>

<style lang="scss" scoped>
.top {
  width: 100%;
  height: 70vh;
  position: relative;
  margin-bottom: 0.1rem;
  #map_container {
    width: 100%;
    height: 100%;
  }
  .textDiv {
    position: absolute;
    width: 70%;
    height: 100px;
    top: 0;
    left: 0;
    z-index: 10000;
    .boxs {
      display: flex;
      padding: 10px;
      color: rgb(110, 255, 255);
      font-weight: lighter;
      font-family: "Microsoft Yahei", Arial, "sans-serif";
      font-size: 20px;
      text-overflow: ellipsis;
      white-space: nowrap;
      overflow: hidden;
      line-height: normal;
      margin: 0px 0px 5px;
      .item {
        flex: 1;
      }
      .car {
        text-align: right;
        margin-right: 7%;
        font-size: 36px;
      }
    }
  }
}
</style>
